﻿@page "/tree-grid/exporting"

@using Syncfusion.Blazor.TreeGrid
@using Syncfusion.Blazor.Grids;

@*Hidden:Lines*@
@using ej2_blazor_selfdata
@inherits SampleBaseComponent;
@*End:Hidden*@

<SampleDescription>
    <p>This sample demonstrates the client-side exporting of the Tree Grid, which allows you to export its data to the Excel, Pdf and CSV formats. Use the toolbar buttons to export Tree Grid data to the desired format.</p>
</SampleDescription>
<ActionDescription>
   <p>Tree Grid supports client-side exporting which allows you to export its data to the Excel, Pdf and CSV formats.</p>
   <p>In this demo, for the toolbar items of exporting, we have defined actions in <code>OnToolbarClick</code> event to export the Tree Grid data using the <code>ExcelExport</code>, <code>PdfExport</code> and <code>CsvExport</code> methods.</p>
   <p>More information on the exporting can be found in <a target='_blank' href='https://blazor.syncfusion.com/documentation/treegrid/excel-export/' >Excel Export</a> and <a target='_blank'  href='https://blazor.syncfusion.com/documentation/treegrid/exporting/' >Pdf Export</a> documentation section.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
              <SfTreeGrid @ref="TreeGrid" AllowPdfExport="true" AllowExcelExport="true" DataSource="@TreeData" IdMapping="TaskID" ParentIdMapping="ParentID" Height="315" TreeColumnIndex="1" AllowPaging="true" Toolbar="@(new List<string>() { "PdfExport", "ExcelExport", "CsvExport" })">
                <TreeGridEvents OnToolbarClick="Toolbarclick" TValue="SelfReferenceData"></TreeGridEvents>
                <TreeGridPageSettings PageSize="2"></TreeGridPageSettings>
                <TreeGridColumns>
                    <TreeGridColumn Field="TaskID" HeaderText="Task ID" Width="80" IsPrimaryKey="true" TextAlign="@TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="145"></TreeGridColumn>
                    <TreeGridColumn Field="StartDate" HeaderText="Start Date" Format="d" Type=ColumnType.Date Width="88" TextAlign="@TextAlign.Right" EditType=EditType.DatePickerEdit></TreeGridColumn>
                    <TreeGridColumn Field="Duration" HeaderText="Duration" Format="n" Width="100" TextAlign="@TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100"></TreeGridColumn>
                    <TreeGridColumn Field="Priority" HeaderText="Priority" Width="100"></TreeGridColumn>

                </TreeGridColumns>
            </SfTreeGrid>

        </div>
    </div>
</div>

@code{

    SfTreeGrid<SelfReferenceData> TreeGrid;

    public List<SelfReferenceData> TreeData { get; set; }

    protected override void OnInitialized()
    {
        this.TreeData = SelfReferenceData.GetTree().ToList();
    }

    public async Task Toolbarclick(Syncfusion.Blazor.Navigations.ClickEventArgs args)
    {
        if (args.Item.Text == "PDF Export")
        {
            await this.TreeGrid.ExportToPdfAsync();
        }
        else if (args.Item.Text == "Excel Export")
        {
            await this.TreeGrid.ExportToExcelAsync();
        }
        else if (args.Item.Text == "CSV Export")
        {
            await this.TreeGrid.ExportToCsvAsync();
        }
    }
}
